<template>
  <div class="body_content" :style="{height: client.height-142 + 'px'}">
    <Left class="left" :treeData="treeData" @getWeather="getWeather" :default="projectId" :personInfo="personInfo" :weather="weather" @chengeCityCode="chengeCityCode"  @selectChange="selectChange" />
    <div class="right_panel">
      <Right class="right" :flowInfo="flowInfo" v-for="(t,index) in treeData" :key="index" :data="t" />
    </div>
  </div>
</template>

<script>
  import Left from "./left.vue";
  import Right from "./right.vue";
  import {
    homePage,
    projectManagement,
    weather
  } from "../../service/service_zbw";
  import {
    mapState
  } from 'vuex';

  export default {
    computed: {
      ...mapState({
        client: state => state.client,
      }),
    },
    components: {
      Left,
      Right
    },
    data() {
      return {
        treeData: [{
            name: '不停航施工',
            children: []
          },
          {
            name: '数字化监控',
            children: []
          }
        ],
        personInfo: {},
        flowInfo: [],
        projectId: null,
        weather:{
          weatherAll:{},
          weatherHour:[]
        },
        cityCode:"",
      }
    },
    methods: {
      async getUserInfo(){
        let res = await homePage.getUserInfo();
        if (res.success) {
          this.personInfo = res.obj;
        }
      },
      async getProList() {
        let res = await projectManagement.getProList();
        if (res.success) {
          this.treeData[0].children = res.obj;
          if (this.treeData[0].children.length > 0) {
            for (let i of this.treeData[0].children) {
              i.id = i.projectId;
            }
            this.projectId = this.treeData[0].children[0].projectId;
          }
        }
      },
      async getFlowInfo(param) {
        
        let res = await homePage.getFlowInfo(param);
        if (res.success) {
          this.flowInfo = res.obj;
          for (let i of this.flowInfo) {
            console.log("i.flowProcesses1",i.flowProcesses);
            i.flowProcesses = this.formatFlowFirst(i.flowProcesses);
            console.log("i.flowProcesses2",i.flowProcesses);
          }
        } else {
          this.flowInfo = [];
        }
      },
      async getWeather(param){
        param = param || 'CHSN010000';
        let res = await weather(param);
        if(res.result){
          this.weather.weatherAll = res.obj.weatherAll.weather[0];
          this.weather.weatherHour = res.obj.weatherHour.hourly;
        }else {
          this.weather.weatherAll = {};
          this.weather.weatherHour = [];
        }
      },
      async chengeCityCode(val){
        this.cityCode = val;
      },
      /**
       * 整理进程格式
       */
      formatFlowFirst(val) {
        let obj = [];
        for (let i of val) {
          if (i.parentId === 0) {
            this.formatFlowSecond(i, val);
            obj.push(i);
          }
        }
        return obj;
      },
      formatFlowSecond(val, datas) {
        console.log("datas:",datas);
        val.children = [];
        val.finish = true;
        for (let i of datas) {
          if (i.parentId === val.flowId) {
            val.children.push(i);
            if (i.state === 0) {
              val.finish = false;
            }
          }
          
        }
        console.log("valFinish:",val.finish);
      },
      selectChange(val) {
        this.projectId = val.projectId;
      }
    },
    watch: {
      projectId(newval) {
        if (newval) {
          this.getFlowInfo(this.projectId);
        } 
      },
      cityCode(newval){
        if(newval){
          console.log(newval)
          this.getWeather(this.cityCode)
        }
      }
    },
    mounted() {
      this.getUserInfo();
      this.getProList();
      
    }
  }

</script>

<style scoped>
  .body_content {
    background: #ebebeb;
    display: flex;
  }

  .left {
    width: 258px;
  }

  .right_panel {
    width: calc(100% - 278px);
    display: flex;
  }

  .right {
    width: 50% !important;
  }

</style>

